<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>{$info.user_address}</title>
  {load href="/static/css/mui.min.css" /}
  <!-- mui 图片预览组件的样式 -->
  <style>
    .mui-preview-image.mui-fullscreen {
      position: fixed;
      z-index: 20;
      background-color: #000;
    }

    .mui-preview-header,
    .mui-preview-footer {
      position: absolute;
      width: 100%;
      left: 0;
      z-index: 10;
    }

    .mui-preview-header {
      height: .44rem;
      top: 0;
    }

    .mui-preview-footer {
      height: .5rem;
      bottom: 0;
    }

    .mui-preview-header .mui-preview-indicator {
      display: block;
      line-height: .25rem;
      color: #fff;
      text-align: center;
      margin: .15rem auto;
      width: .7rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: .12rem;
      font-size: .16rem;
    }

    .mui-preview-image {
      display: none;
      -webkit-animation-duration: 0.5s;
      animation-duration: 0.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .mui-preview-image.mui-preview-in {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }

    .mui-preview-image.mui-preview-out {
      background: none;
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
    }

    .mui-preview-image.mui-preview-out .mui-preview-header,
    .mui-preview-image.mui-preview-out .mui-preview-footer {
      display: none;
    }

    .mui-zoom-scroller {
      position: absolute;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-backface-visibility: hidden;
    }

    .mui-zoom {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .mui-slider .mui-slider-group .mui-slider-item img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }

    .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
      width: 100%;
    }

    .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
      display: inline-table;
    }

    .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
      display: table-cell;
      vertical-align: middle;
    }

    .mui-preview-loading {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: none;
    }

    .mui-preview-loading.mui-active {
      display: block;
    }

    .mui-preview-loading .mui-spinner-white {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -0.25rem;
      margin-top: -0.25rem;
      height: 0.5rem;
      width: 0.5rem;
    }

    .mui-preview-image img.mui-transitioning {
      -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
      transition: transform 0.5s ease, opacity 0.5s ease;
    }

    @-webkit-keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    p img {
      max-width: 100%;
      height: auto;
    }
  </style>
  <style>
    blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    html {
      font-size: 26.6666666vw; /* rem 适配， 3.75rem 满屏 */
    }

    body {
      font-size: .16rem;
    }

    .clearfix::after {
      display: block;
      content: "";
      clear: both;
    }

    .main {
      width: 100%;
      background-color: #fff;
    }

    .list {
      width: 100%;
      list-style: none;
    }

    .list .list-item {
      width: 100%;
      padding: .1rem 0;
      border-bottom: 1px solid #e1e1e1;
    }

    .list .list-item .user-img {
      float: left;
      width: .62rem;
    }

    .list .list-item .user-img {
      width: .62rem;
    }

    .list .list-item .user-img img {
      display: block;
      margin: 0 auto;
      width: .42rem;
      height: .42rem;
      border-radius: .05rem;
    }

    .list .list-item .cont {
      float: right;
      width: 3rem;
      margin-right: .1rem;
    }

    .list .list-item .cont .user-name {
      font-size: .16rem;
      line-height: .24rem;
      color: #21386c;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .list .list-item .cont .show-title {
      padding: .03rem;
      font-size: .16rem;
      line-height: .24rem;
      color: #000;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .list .list-item .cont .info {
      width: 100%;
      font-size: .14rem;
      line-height: .24rem;
    }

    .list .list-item .cont .info .info-item {
      display: flex;
    }

    .list .list-item .cont .info .info-item .text {
      width: 50%;
    }

    .list .list-item .cont .show-img {
      width: 100%;
      margin-top: .1rem;
    }

    .list .list-item .cont .show-img .img {
      float: left;
      width: .9rem;
      height: .88rem;
      margin: .03rem;
    }

    .list .list-item .cont .show-img .img img {
      width: .9rem;
      height: .88rem;
      object-fit: cover;
    }

    .list .list-item .cont .show-img-1 {
      width: 100%;
      margin-top: .1rem;
    }

    .list .list-item .cont .show-img-1 .img {

    }

    .list .list-item .cont .show-img-1 .img img {
      max-height: 2.2rem;
      max-width: 2.2rem;
    }

    .list .list-item .cont .show-time {
      font-size: .14rem;
      line-height: .5rem;
      color: #999;
    }

    .header {
      position: relative;
      border-bottom: .4rem solid transparent;
    }

    .header .header-bg {
      width: 3.75rem;
      height: 2rem;
      background-image:url('/uploads/sys/beijing.jpg');
    }

    .header .header-bg img {
      width: 100%;
      height: 100%;
    }

    .header .nickname {
      position: absolute;
      bottom: .1rem;
      right: 1rem;
      font-size: .18rem;
      line-height: .24rem;
      font-weight: 700;
      color: #fff;

    }

    .header .user-img {
      position: absolute;
      bottom: -0.25rem;
      right: .2rem;
      width: .7rem;
      height: .7rem;
    }

    .header .user-img img {
      width: 100%;
      height: 100%;
      border-radius: .1rem;
    }
    .header .text {
      width: 75%;
      position: absolute;
      top: 15%;
      left: 10%;
    }
    .header .text .disgin {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      color: #0C0C0C;
    }
    .header .text .disgin .left {
      height: 0.3rem;
    }
    .header .text .disgin .left span {
      color: #0C0C0C;
    }
    .header .text .disgin .right {
      margin-left: 5%;
      height: 0.3rem;
    }
    .header .text .disgin .right span {
      color: #0C0C0C;
    }
    .gd .active {
      background: red;
    }
    .header .changeBtn {
      position: absolute;
      left: 25%;
      bottom: 5%;
      width: 0.6rem;
      height: 0.3rem;
      color: #2473ef;
      border-radius: 0.05rem;
      text-align: center;
      line-height: 0.3rem;
      background: #cae1ff;
    }
    .header .VRBtn {
        position: absolute;
        left: 8%;
        bottom: 5%;
        width: 0.6rem;
        height: 0.3rem;
        color: #2473ef;
        border-radius: 0.05rem;
        text-align: center;
        line-height: 0.3rem;
        background: #cae1ff;
    }
    .alert {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.6);
      z-index: 99;
    }
    .show {
      display: none;
    }
    .alert .fonm {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 3rem;
      min-height: 1rem;
      background-color: #fff;
      border-radius: .1rem;
    }
    .alert .fonm p {
      width: 100%;
      font-size: 0.15rem;
      text-indent: .1rem;
      line-height: .36rem;
      color: black;
    }
    .mescroll{
        position: fixed;
        left: 0;
        right: 0;
        top: 40px;
        bottom: 0;
        height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
    }
  </style>
</head>
<body>

<!-- 图片预览基本演示 -->
<!--<div class="mui-content-padded">-->
<!--<img src="https://blcyzycc.gitee.io/lutu/images/111.png" data-preview-src="" data-preview-group="1"/>-->
<!--<img src="https://blcyzycc.gitee.io/lutu/images/111.png" data-preview-src="" data-preview-group="1"/>-->
<!--<img src="https://blcyzycc.gitee.io/lutu/images/111.png" data-preview-src="" data-preview-group="1"/>-->
<!--</div>-->

<div class="main "  >
  <div class="header">
    <div class="header-bg">
      <!--<img src="https://blcyzycc.gitee.io/lutu/images/111.png">-->
    </div>
      <?php
          if(!empty($info['VrUrl'])){
          $vrUrl = $info['VrUrl'].'&test='.rand(0,9999);
      ?>
        <a class="VRBtn" href="{$vrUrl}">VR</a>
      <?php }?>
      <?php
          if(!empty($info['user_address_array'])){
      ?>
        <div class="changeBtn" id="changeBtn">切换</div>
      <?php }?>
    <div class="nickname" style="color: #0C0C0C">{$info.orderStyle}</div>
    <div class="user-img">
        <?php

          if(!empty($info['orderImg'])){
            $first = $info['orderImg'][0];
            unset($info['orderImg'][0]);
       ?>
        <a class="img" href="javascript:void(0)"><img  src="{$first}" alt=""  data-preview-src="" data-preview-group="0"></a>
        <div style="display: none">
            {volist name="$info.orderImg" id="v"}
                <a class="img" href="javascript:void(0)"><img  src="{$v}" alt=""  data-preview-src="" data-preview-group="0"></a>
            {/volist}
        </div>
        <?php } ?>
    </div>
    <div class="text">
        <div class="disgin">
          <div class="left">
            设计师：<span>{$info.design_user}</span>
          </div>
          <div class="right">
            监工：<span>{$info.site_supervisor_uid}</span>
          </div>
        </div>
       <div class="disgin">
         <div class="left">
           工期：<span>{$info.duration}</span>
         </div>
         <div class="right">
           状态：<span>{$info.orderStatus}</span>
         </div>
       </div>
       <div class="disgin">
         <div class="left">
           开工时间：<span>{$info.startWord}</span>
         </div>
       </div>
      <div class="disgin">
         <div class="left">
           预计完工时间：<span>{$info.endWord}</span>
         </div>
       </div>
     </div>
  </div>
  <ul class="list">
    {volist name="$info.orderLog" id="vo"}
      <li class="list-item clearfix">
        <div class="user-img"><img src="\uploads\sys\tx.jpg" alt=""></div>
        <div class="cont">
          <div class="user-name">帝豪装饰</div>
          <div class="show-title">{$vo.msg}</div>
          <div class="show-img clearfix">
              <?php
                $time = $key;
                if(!empty($vo['file'])){
              ?>
              {volist name="$vo.file" id="v"}
              <a class="img" href="javascript:void(0)">
                <img src="{$v}" data-preview-src="" data-preview-group="{$time}">
              </a>
              {/volist}
              <?php } ?>
              <?php
                if(!empty($vo['url']) && isset($vo['url'])){
                  $urlFile =$vo['url'].'&test='.rand(0,9999);
              ?>
                <a href="{$urlFile}">VR全景</a>
              <?php
                }
              ?>
          </div>
          <div class="show-time">{$time}</div>
        </div>
      </li>
    {/volist}
  </ul>
    <div id="ajaxList">
    </div>
</div>
<input type="hidden" name="page" value="1" id="page">
<input type="hidden" name="pageNum" value="{$info.orderLogPage}" id="pageNum">
<input type="hidden" name="order_number" value="{$info.order_number}" id="order_number">
<?php if($info['orderLogPage'] > 1  ){ ?>
<div style="height: 80px" id="ajax">
    <button  style="display:block;margin:0 auto;height: 80px; width:100%; font-size:40px" value="加载更多" onclick="ajaxList()">加载更多</button>
</div>
<?php }?>
<!-- 弹窗 -->
<div class="alert show" id="alerPn">
  <div class=fonm id="alerContent">
      <?php
          if(!empty($info['user_address_array'])){
      ?>
        {volist name="$info.user_address_array" id="v"}
            <p><a href="/index/SiteLog/index/order_number/{$key}">{$v} </a> <span>  </span></p>

        {/volist}
      <?php
         }
      ?>
  </div>
</div>

{load href="/static/js/mui.min.js" /}
{load href="/static/js/mui.zoom.js" /}
{load href="/static/js/mui.previewimage.js" /}
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  mui.previewImage();
  mui('body').on( 'tap' , 'a' , function(){
      document.location.href=this.href;
  } )
  var eAlert = document.querySelector('.alert')
  eAlert.ontouchmove = function (ev) {
    ev.stopPropagation()
    ev.preventDefault()
  }
  document.getElementById('alerPn').onclick = function () {
     document.getElementById('alerPn').style.display = 'none'
  }
  document.getElementById('changeBtn').onclick = function () {
    document.getElementById('alerPn').style.display = 'block'
  }

  function ajaxList() {
      var page = $('#page').val();
      var pageNum = $('#pageNum').val();
      var order_number = $('#order_number').val();
      page++;
      $.ajax({
          type: "get",
          url: '/index/SiteLog/ajax/page/'+page+'/order_number/'+order_number,
          async:false,
          success: function(msg){
              if(page == pageNum){
                  $('#ajax').remove();
              }else{
                  $('#page').val(page);
              }
          }
      })
  }
</script>
</body>
</html>